<template>
  <!-- 带图片的card-list -->
  <view class="card-list-img">

    <!--  -->
    <uni-card class="card-list" v-for="(item,index) in shopList" :key="index" @click="gotoDetail(item)">
    	<!-- 滑动 -->
    	<uni-swipe-action>
    	  <uni-swipe-action-item
    	      :right-options="options2"
    	      :show="isOpened"
    	      :auto-close="false"
    	      @change="change"
    	      @click="bindClick"
    	  >
    	    <view class="content-box">
    	      <!-- 卡片里的内容 -->
            <uni-row class="demo-uni-row">
    	      	<uni-col :span="10">
    	      		<view class="part-one">
    	            <label class="radio" v-if="isCartShow">
    	              <radio :value="item.prop" :checked="item.isCheck" @click="changeCheck(item,index)" />
    	            </label>
    	            <image src="/static/images/apply-img/办会家_审核通过 (1).png" mode="aspectFit" class="part-one-img"></image>
    	          </view>
    	      	</uni-col>
    	      	<uni-col :span="14" >
    	      		<view class="part-two">
    	            <view class="title">
    	              {{item.label}} 
    	            </view>
    	            <view class="del">
    	              <uni-icons type="trash" size="22" v-if="isCartShow"></uni-icons>
    	            </view>
    	            <view class="price">
    	              <span class="red-c margR20">￥ {{item.price}}</span>
    	              <span v-if="isShopShow"> 原价：<span class="line-word">  ￥ {{item.oldPrice}} </span> </span>
    	              <uni-number-box   class="num-edit" @change="changeNumValue" v-if="isCartShow" />
    	            </view>
    	          </view>
    	      	</uni-col>
    	      </uni-row>
            
    	    </view>
    	  </uni-swipe-action-item>
    	</uni-swipe-action>
    </uni-card>
    <view class="part-three" v-if="isCartShow">
       <label class="radio">
         <radio :checked="isAllCheck" @click="changeAllCheck(isAllCheck)" />全选
       </label>
      <view class="r-part">
        <span class="padR10">合计：<span class="red-c"> ￥ 24100 </span> </span>
        <button class="red-btn" size="mini" >下单</button>
      </view>
    </view>
    
  </view>
</template>

<script setup>
import { ref } from 'vue';
  
  // 组件交互
  const prop = defineProps({
    isCartShow : {  // 购物车页面显示
      type: Boolean,
      default: false,
    },
    isShopShow: { // 商品页面显示
      type: Boolean,
      default: false
    }
  })
  
  // const allCheck = ref('')
  const isAllCheck = ref(false)
  const changeAllCheck = ()=> {
    isAllCheck.value = !isAllCheck.value
    console.log('勾选：',isAllCheck.value);
    shopList.value.forEach((item) => {
      item.isCheck = isAllCheck.value
    })
  }
  
  const shopList = ref([
    { label: "W-18mmPGA单面胭脂粉（背面暖白）E0", prop: "skuCode",price: 200,oldPrice: 300,isCheck: false },
    { label: "热熔胶-白色-GC", prop: "model",price: 200,oldPrice: 300,isCheck: false },
    { label: "测试纯牛奶", prop: "matCode",price: 200,oldPrice: 300,isCheck: false },
    { label: "测试咖啡", prop: "matName",price: 200,oldPrice: 300,isCheck: false },
    { label: "测试平贴板", prop: "unit",price: 200,oldPrice: 300,isCheck: false },
    { label: "穗香暖木封边带", prop: "specs",price: 200,oldPrice: 300,isCheck: false },
    { label: "补仓数量", prop: "planNumUS",price: 200,oldPrice: 300,isCheck: false }
  ])
  
  const changeCheck = (row,index)=>{
    console.log('勾选：', row);
    row.isCheck = !row.isCheck
  }
  
  // 修改数量
  const changeNumValue = (val)=>{
    console.log('返回数值：', val);
  }
  
  const options2 = ref([
    { text: '取消', style: { backgroundColor: '#007aff' } },
    { text: '确认', style: { backgroundColor: '#F56C6C'}  },
  ])
  const show = ref(false) 
	const isOpened = ref('none')
  const change = (e) =>{
      isOpened.value = e;
      console.log('返回：', e);
  }
  const bindClick = (e) =>{
    console.log(e);
    // uni.showToast({
    //   title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
    //   icon: 'none'
    // });
  }
  
  // 跳转详情页
  const gotoDetail = (item) => {
    uni.navigateTo({
      url: '/pages/wsShopping/detail/shop-detail/shop-detail'
    })
  }
  
  
</script>

<style lang="scss">
  .card-list-img {
    width: 100%;
    margin-bottom: 190px;
    .card-list{
      // height: 200px;
      // margin-bottom: 35px;
    }
    .part-one { 
      height: 100%; 
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      
      .part-one-img {
         height: 100px;
       }
    }
    .part-two{
      // line-height: 2;
      .del{
        text-align: right;
        padding-bottom: 10px;
      }
      .title{
        font-size: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        width: 100%;
      }
      .price {
        position: absolute;
        bottom: 0;
      }
      .num-edit {
        float: right;
      }
    }
    .part-three {
      width: 100%;
      height: 60px;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 113px;
      z-index: 998;
      border: solid #dadadaef 0.3px; 
      background-color: #ffffff;
      padding-left: 44px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .r-part{
        margin-right: 60px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
      }
    }
  }    
</style>
